<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/com.css">
    <title></title>
</head>
<body>
<div class="my-head">
    <div class="container">
        <div class="col-sm-4">
            <img  class="index-log" src="../../images/index-logo.png">
        </div>
        <div class="col-sm-4 col-sm-push-4 index-hr">
            <div class="col-xs-6 col-xs-pull-1" >
                <form class="form-horizontal">
                    <div class="form-group index-hr-pd">
                        <div class="input-group ver-cen-pad" id="head-input-box">
                            <label for="index-search"class="sr-only">Search</label>
                            <input id="index-search" class="form-control" type="text">
                            <div class="input-group-btn index-search-icon"><button type="submit" class="btn" ><img class="search-btn" src="../../images/search-icon.png"></button></a></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-xs-6 index-hr-pd ab-l">
                <ul class="nav nav-tabs user-login-box">
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            <img src="../../images/user-hd-img.png">
                            <span id="user-name">王晓华</span>
                            <span class="caret"></span></span>
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="list-group-item user-center-page">个人主页</a>
                            <a href="#" class="list-group-item user-set">账号设置</a>
                            <a href="#" class="list-group-item user-qus">常见问题</a>
                            <a href="#" class="list-group-item user-login-out">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="source-play-main">
    <div class="container">
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="#">设计与发现课程学习页面</a></li>
                <li class="active">学习交流</li>
            </ol>
        </div>
    </div>
    <div class="container">
        <div class="row media-tabs-box">
            <div class="col-md-12 add-pad">
                <div class="tab-content">
                    <div  role="tabpanel" class="tab-pane fade active in source-detail-p1 source-communicate" id="question-key">
                        <div class="part-content">
                            <div class="col-sm-12 col-md-12 source-cmc-head">
                                <h4 class="title-l1">课程相关问题<br><small class="title-l2">提问请到课程学习页面</small></h4>
                                <a href="#" class="view-options">查看选项</a><label class="label label-success">教师解答</label>
                            </div>
                        </div>
                        <div class="part-content part-ex part-more-pad" >
                            <div class="col-md-12 p1-snd">
                                <div class="media media-fir">
                                    <div class="media-left">
                                        <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                    </div>
                                    <div class="media-body">
                                        <span class="user-name">王小花</span>
                                        <p class="q-d-box"><span class="discus">提问</span><span class="discus-count">3</span></p>
                                        <p class="q-d-box"><span class="same-q">同问</span><span class="same-q-count">21</span></p>
                                    </div>
                                </div>
                                <p class="user-q">设计流程是否一定要遵循所有步骤进行，还是能够根据实际情况跳过某些步骤？<span class="uq-tz">一小时前</span></p>
                                <div class="media media-snd">
                                    <div class="media-left">
                                        <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                    </div>
                                    <div class="media-body">
                                        <span class="user-name user-discus">王大花</span><span class="discus-tz">30分钟前</span>
                                        <p class="discus-ans">一般情况按标准流程进行能确保更全面的思考，如果应用得熟练，可适当快速完成某些步骤。<span class="user-agree">赞同</span><span class="user-like">2</span></p>
                                    </div>
                                </div>
                                <div class="media media-snd">
                                    <div class="media-left">
                                        <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                    </div>
                                    <div class="media-body">
                                        <span class="user-name user-discus">王大花</span><span class="discus-tz">30分钟前</span>
                                        <p class="discus-ans">一般情况按标准流程进行能确保更全面的思考，如果应用得熟练，可适当快速完成某些步骤。<span class="user-agree">赞同</span><span class="user-like">2</span></p>
                                    </div>
                                </div>
                                <div class="hid-ans">
                                    <div class="media media-snd">
                                        <div class="media-left">
                                            <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                        </div>
                                        <div class="media-body">
                                            <span class="user-name user-discus">王大花</span><span class="discus-tz">30分钟前</span>
                                            <p class="discus-ans">一般情况按标准流程进行能确保更全面的思考，如果应用得熟练，可适当快速完成某些步骤。<span class="user-agree">赞同</span><span class="user-like">2</span></p>
                                        </div>
                                    </div>
                                    <div class="media media-snd">
                                        <div class="media-left">
                                            <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                        </div>
                                        <div class="media-body">
                                            <span class="user-name user-discus">王大花</span><span class="discus-tz">30分钟前</span>
                                            <p class="discus-ans">一般情况按标准流程进行能确保更全面的思考，如果应用得熟练，可适当快速完成某些步骤。<span class="user-agree">赞同</span><span class="user-like">2</span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="view-all-box">
                                    <div class="hid-head">
                                        <a href="#" class="view-all-ans">展开全部</a><button class="btn ans-btn">回 答</button>
                                    </div>
                                    <form class="hid-form">
                                        <div class="form-group">
                                            <label for="user-q" class="sr-only"></label>
                                            <textarea class="form-control" rows="3" id="user-q"></textarea>
                                        </div>
                                        <div class="form-group text-right">
                                            <button type="button" class="btn cancel-ans">取 消</button>
                                            <button type="submit" class="btn submit-ans">确 定</button>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </div>
                        <div class="part-content part-ex part-more-mrg">
                            <div class="col-md-12 p1-snd">
                                <div class="media media-fir">
                                    <div class="media-left">
                                        <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                    </div>
                                    <div class="media-body">
                                        <span class="user-name">王小花</span>
                                        <p class="q-d-box discus-none"><span class="discus">提问</span><span class="discus-count">0</span></p>
                                        <p class="q-d-box active"><span class="same-q">同问</span><span class="same-q-count">21</span></p>
                                    </div>
                                </div>
                                <p class="user-q">设计流程是否一定要遵循所有步骤进行，还是能够根据实际情况跳过某些步骤？<span class="uq-tz">一小时前</span></p>
                                <div class="media media-snd">
                                    <div class="media-left">
                                        <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                    </div>
                                    <div class="media-body">
                                        <span class="user-name user-discus">李老师</span><span class="label label-danger teacher-label">教师解答</span><span class="discus-tz">30分钟前</span>
                                        <p class="discus-ans">一般情况按标准流程进行能确保更全面的思考，如果应用得熟练，可适当快速完成某些步骤。<span class="user-thanks">感谢</span><span class="user-collect">3</span></p>
                                    </div>
                                </div>
                                <div class="view-all-box">
                                    <a href="#" class="view-all-ans none-ans">展开全部</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-push-6 text-right">
                <ul class="pagination my-pagination">
                    <li class=""><span>上一页</span></li>
                    <li class=""><span>1</span></li>
                    <li><a href="http://bigschool.com/backend/course/index?page=2">2</a></li>
                    <li class=""><span>1</span></li>
                    <li><a href="http://bigschool.com/backend/course/index?page=2">2</a></li>
                    <li class=""><span>1</span></li>
                    <li><a href="http://bigschool.com/backend/course/index?page=2">2</a></li>
                    <li><a href="http://bigschool.com/backend/course/index?page=2" rel="next">下一页</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h4 class="foot-title">联系方式</h4>
                <ul class="my-list foot-list">
                    <li>010-5653 8600</li>
                    <li>北京市朝阳区大屯东路名人公寓</li>
                    <li>media@zhigan-mail.com</li>
                </ul>
                <h5 class="foot-title-se">中国青少年科技辅导员协会 合作网站</h5>
                <p class="foot-clr">Copyright 2015 备案号 京备2016123445678899</p>
            </div>
            <div class="col-md-3">
                <div class="col-xs-10">
                    <img src="../../images/index-wc-icon.png">
                    <a class="back-top" href="#"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script>
    $(function(){
        $(".source-detail-p1 .media-body a").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("active").siblings().removeClass("active");
        });
        $(".ques-list li").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("active").siblings().removeClass("active");
        });
        $(".user-agree").click(function(){
            $(this).toggleClass("like");
            if($(this).hasClass("like")) {
                $(this).next().text(parseInt($(this).next().text()) + 1);
            } else {
                $(this).next().text(parseInt($(this).next().text()) - 1);
            }
        });
        $(".user-thanks").click(function() {
            $(this).toggleClass("collect");
            if($(this).hasClass("collect")) {
                $(this).next().text(parseInt($(this).next().text()) + 1);

            } else {
                $(this).next().text(parseInt($(this).next().text()) - 1);
            }
        });
        $(".q-d-box").click(function(){
            $(this).toggleClass("active");
            $that = $(this).find(".same-q-count");
            if($(this).hasClass("active")) {
                $that.text(parseInt($that.text()) + 1);
            } else {
                $that.text(parseInt($that.text()) - 1);
            }
        });
        $(".source-key-box .list-group-item").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("click").siblings().removeClass("click");
        });
        $(".share-btn").click(function() {
            $(this).toggleClass("share-clicked");
            $(".share-list").toggle();
        });



        $(".view-all-ans").click(function() {
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            if($(this).hasClass("none-ans")) {
                return
            }
            $(this).parent().parent().parent().find(".hid-ans").slideDown();
        })

        $(".ans-btn").click(function(){
            $(this).parent().next().slideDown();
            $(this).parent().parent().parent().find(".hid-ans").slideDown();
            $(this).parent().fadeOut();
        });

        $(".cancel-ans").click(function(){
            $(this).parent().fadeOut();
        });
    });
</script>
</body>
</html>